<template>
  <div id="music">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="main">
      <div class="first">
      	<p>一 GCC联手海峡两岸 一</p>
      	<h3>粤港澳大湾区音乐节</h3>
      	<p>明星：汪明荃、平安、杨品骅、李雨儿</p>
      	<p>中国国家交响乐歌唱家：孙笑盈</p>
      	<p>旅英高男高音歌唱家：李梅里</p>
      </div>
      <div class="two">
      	<h2><div><img :src="qrcode" alt id="saveMyCode" /></div></h2>
      	<h5>码上有礼</h5>
      	<p class="mg10">（数量有限先到先得）</p>
      	<p class="small mg10"></p>
      	<p class="cente">10月26日 晚上19:30-21:30 福田区体育公园体育馆</p>
      	<p class="cente">中共中央统战部、国务院台办、民革中央联合举办</p>
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import QRCode from "qrcode";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      qrcode: "",
      url:'',
      logo:'static/img/new/logo@2x.png'
    };
  },
  created() {
    this.changeTitle("演唱会活动海报");
    this.url = window.location.href.replace("musicPoster", "reg");
    Toast("请截图发至朋友圈");
  },
  components: { Header,QRCode },
  computed: {},
  mounted() {
  	QRCode.toDataURL(this.url, {
      version: 7, //这个是版本号，
      errorCorrectionLevel: "Q", //这个是容错率,(建议选较低)更高的级别可以识别
      width: 84,
      height: 84, //设置二维码图片大小
      margin: 0
    })
      .then(url => {
        //这个url是二维码生成地址，也就是相当于图片地址
        //        console.log(url);
        this.qrcode = url; //这个是vue实例全局的变量，赋值给他。后面会用在img的src属性上
      })
      .catch(err => {
        console.error(err); //这里看不懂的话去看一下Promise（then, catch）
      });
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#music {
	width: 100%;
	padding-top: .88rem;
	height: 100%;
	background: #0b0602;
  .main{
	background: url("~@/assets/img/music/bg2.png") no-repeat center / 100% 100%;
	width: 100%;
	min-height: 13.5rem;
	padding: 5.64rem .62rem 0;
	box-sizing: border-box;
	>div{
		color: #f7b101;
		text-align: center;
		font-size: .18rem;
		h3{
			font-size: .42rem;
		    letter-spacing: .1rem;
		    margin-bottom: .14rem;
		}
		h2{
			display: flex;
			justify-content: center;
			align-items: center;
			#meQrcode{
				
					width: 1.68rem;
					height: 1.68rem;
				img{
					width: 1.68rem;
					height: 1.68rem;
				}
			}
			div{
					padding: .1rem;
					background: #fff;
					img{
							width: 1.68rem;
							height: 1.68rem;
						}
			}
		}
		h5{
			font-size: .28rem;
			padding: .08rem 0 .06rem;
		}
		p{
			letter-spacing: .04rem;
			margin-bottom: .02rem;
			&.mg10{
				margin-bottom: .08rem;
			}
		}
		&.first{
			margin-bottom: .36rem;
			p{
				justify-content: center;
				&:first-child{
					font-size: .32rem;
					letter-spacing: .06rem;
				}	
			}
		}
		&.two{
			p.small{
				font-size: .16rem;
			}
		}
	}
  }
}
</style>